<template>
  <div class="index_container">
    <!-- 头部盒子 -->
    <div class="header_box">
      <img class="logo" src="../assets/imgs/logo.png" alt="" />
      <div class="titlt_box">
        <div class="title">抽灌实验实时监测系统</div>
      </div>
      <div class="back" @click="backToHome">
        <img class="backimg" src="../assets/imgs/back.png" alt="" />
      </div>
    </div>
    <!-- 选择日期时间 -->
    <div class="chose_box">
      <img class="datalt" src="../assets/imgs/datalt.png" alt="" />
      <img class="datarb" src="../assets/imgs/datarb.png" alt="" />
      <div class="info">
        <!-- 展示当前时间 -->
        <div class="title"><span class="tiname">数据管理</span></div>
        <Time class="time"></Time>
      </div>
      <div class="chosepro_box">
        <div class="program">
          <span>项目选择：</span>
          <el-select v-model="pro" placeholder="请选择" @change="getNumList">
            <el-option
              v-for="item in proList"
              :label="item.name"
              :key="item.id"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="program">
          <span>编号选择：</span>
          <el-select v-model="num" placeholder="请选择" @change="getClyList">
            <el-option
              v-for="item in numList"
              :key="item.id"
              :label="item.code"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="program cylList">
          <span>试验周期：</span>

          <el-select v-model="cyl" placeholder="请选择" @change="changeData">
            <!-- :key="item.periodNum" -->
            <el-option
              v-for="(item, i) in cylList"
              :key="i"
              :label="item.dateRange"
              :value="item.periodNum"
            >
            </el-option>
          </el-select>
          <!-- <el-option
              v-for="item in cylList"
              :key="item.periodNum"
              :value="item.periodNum"
              :label="item.dateRange"
            >
            </el-option>
          </el-select> -->
        </div>
      </div>

      <!-- 选择时间 -->
      <div class="table_box">
        <div class="data">日期选择</div>
        <div class="satrt">
          开始时间：
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          <!-- <select v-model="startTime" type="time">
            <option value="NONE">未选择</option>
            <option v-for="(options, i) in daylist" :key="i" :value="options">
              {{ options }}
            </option>
          </select> -->
          <!-- <input class="timeinput" v-model="startTime" type="time" /> -->
        </div>
        <div class="end">
          结束时间:
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          <!-- <input class="timeinput" v-model="endTime" type="time" /> -->
        </div>
        <div class="circle">
          周期:
          <select v-model="circle" type="time">
            <!-- <option value="NONE">未选择</option> -->
            <option v-for="(options, i) in clrlist" :key="i" :value="options">
              {{ options }}
            </option>
          </select>
          分钟
        </div>
        <div class="check" @click="checkHandle">查询</div>
        <div class="check" @click="exportToExcel">导出</div>
        <!--   -->
      </div>
    </div>
    <!-- 历史数据 -->
    <div class="history_box">
      <div class="title"><span class="tiname">历史数据</span></div>
      <div class="table">
        <table cellspacing="0" class="table-head" :class="scroll ? 'pdl' : ''">
          <thead>
            <tr>
              <th></th>
              <th colspan="5">取水井</th>
              <th colspan="2">回水井（{{ well1 }}）</th>
              <th colspan="2">回水井（{{ well2 }}）</th>
            </tr>
            <tr>
              <th>时间</th>
              <th>电流(A)</th>
              <th>水温(℃)</th>
              <th>水位(m)</th>
              <th>流量(m³/h)</th>
              <th>频率(Hz)</th>

              <th>水位(m)</th>
              <th>流量(m³/h)</th>

              <th>水位(m)</th>
              <th>流量(m³/h)</th>
            </tr>
          </thead>
        </table>
        <div class="table_body" ref="table_body" @scroll="scrollHandle">
          <table class="detail" cellspacing="0">
            <tbody ref="table_detail">
              <!-- <tr v-for="i in 30" :key="i">
                <td>10:10</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
              </tr> -->
              <tr v-for="(item, i) in datalist" :key="i">
                <!-- <td>2022-09-28 14:45:46</td> -->
                <td>{{ item.time }}</td>

                <td>{{ item.electricity }}</td>
                <td>{{ item.temperature }}</td>
                <td>{{ item.waterLevel }}</td>
                <td>{{ item.wellFlow }}</td>
                <td>{{ item.realTimeFrequency }}</td>

                <td>{{ item.waterLevel1 }}</td>
                <td>{{ item.wellFlow1 }}</td>

                <td>{{ item.waterLevel2 }}</td>
                <td>{{ item.wellFlow2 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- <img class="datalt" src="../assets/imgs/datalt.png" alt="" />
      <img class="datalb" src="../assets/imgs/datalb.png" alt="" />
      <img class="datart" src="../assets/imgs/datart.png" alt="" />
      <img class="datarb" src="../assets/imgs/datarb.png" alt="" /> -->
    </div>
    <!-- 密码验证弹框 -->
    <div class="pwd_container" v-if="showPwd">
      <div class="pwd_box">
        <img class="avator" src="../assets/imgs/pwduser.png" alt="" />
        <div class="text">
          <p>请输入密码</p>
          <p>确认您的身份</p>
        </div>
        <div class="input">
          <input v-model="value" type="password" />
        </div>
        <div class="submit" @click="subpwd">
          <img src="../assets/imgs/submitbtn.png" alt="" />
        </div>
        <div class="close" @click="showPwd = false"></div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
import Time from './time'
import '../assets/css/histime.css'
import { export2Excel } from "../untils/tool";
import { getPro, exportRunMarket, getNum, getCly, getData, getProNew } from '../untils/api'
export default {
  // 组件名称
  name: 'History',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    Time
  },
  // 组件状态值
  data () {
    return {
      well1: '',
      well2: '',
      pro: '',
      proList: [],
      num: '',
      numList: [],
      cyl: '',
      cylList: [],
      nows: '',
      nowe: '',
      scroll: false,
      total: 0,
      flag: false,
      pageNo: 1,
      pageSize: 180,
      bodyh: 0,
      tableh: 0,
      clrlist: [1, 30, 60],
      startTime: '',
      endTime: '',
      circle: '',
      //水泵数据
      datalist: [],
      showPwd: false,
      value: '',
      st: null,//倒计时
    }
  },
  // 组件初始化
  created () {
    //首次初始化当天数据
    this.nows = this.getNowData() + ' ' + '08' + ':' + '00' + ':' + '00'
    this.nowe = this.getNowData() + ' ' + '24' + ':' + '00' + ':' + '00'
    this.getProList()

    // this.getdata(this.nows, this.nowe, 1)
    // console.log(nows, nowe)
  },
  // 组件实例挂载完毕
  mounted () {
    //判断表格是否出现滚动条
    // this.checkScroll()
    this.getDefaultData()
    // console.log(this.getNowData())
    // this.checkHandle()
    // this.getProListNew()
  },
  watch: {
    cylList: {
      handler (newVal, oldVal) {
        if (newVal != oldVal && this.cyl != '') {
          this.cyl = 1
          this.changeData()
        }
      },
      deep: true
    }
  },
  // 组件方法
  methods: {
    // 默认历史数据
    async getDefaultData () {

      this.pro = sessionStorage.getItem('proId')
      var num = await this.getNumList()
      this.circle = 1
      this.startTime = this.nows
      this.endTime = this.nowe
      let params = {
        infoId: num,
        projectId: this.pro,
        period: "1",
        startTime: new Date(this.startTime).getTime(),
        endTime: new Date(this.endTime).getTime(),
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      const res = await getData(params)
      console.log(res)
      if (res.result != null && res.result.page.records.length > 0) {
        this.datalist = res.result.page.records
        this.well1 = res.result.well1
        this.well2 = res.result.well2
        this.total = res.result.page.total
      }
      this.st = setTimeout(() => {
        this.checkScroll()
        clearTimeout(this.st); //清除
      }, 0)
    },
    // 获取项目列表
    async getProList () {
      // console.log(111)
      // this.proList = []
      // const res = await getPro()
      // console.log('getProList', res)
      var userId = sessionStorage.getItem('userId')
      const params = {
        userId: userId
      }
      const res = await getProNew(params)
      this.proList = res
    },
    // 获取水井编号
    async getNumList () {
      this.numList = []
      var userId = sessionStorage.getItem('userId')
      let params = {
        projectId: this.pro,
        userId: userId
      }
      const res = await getNum(params)
      this.numList = res
      let result = this.numList.find((item) => {
        return item.status == 1
      })
      if (result) {
        this.num = result.id
        this.getClyList()
      } else {
        this.num = ''
      }
      return this.num
    },
    // 获取试验周期
    async getClyList () {
      this.cylList = []
      let params = {
        infoId: this.num
      }
      const res = await getCly(params)
      // if (!res.length) return
      this.cylList = res
      // this.cylList = this.checkUnique(res)
    },
    // 获取日期
    changeData () {
      var theData = this.cylList.find(item => {
        return item.periodNum == this.cyl
      })
      if (theData == undefined) return
      this.startTime = theData.startTime
      this.endTime = theData.endTime
      // console.log(111, this.cylList)
    },
    checkUnique (arr) {
      let newarr = [arr[0]]
      for (let i = 1; i < arr.length; i++) {
        if (arr.indexOf(arr[i].dateRange) == i) newarr.push(arr[i])
      }
      return newarr
    },
    // showCly () {
    //   console.log(147, this.cyl)
    // },
    //返回首页
    backToHome () {
      this.$router.push('./')
    },
    //查询事件处理
    async checkHandle () {
      var login = window.sessionStorage.getItem("login")
      if (!login) return this.showPwd = true
      this.datalist = []
      let params = {
        infoId: this.num,
        period: this.circle.toString(),
        startTime: new Date(this.startTime).getTime(),
        endTime: new Date(this.endTime).getTime(),
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      const res = await getData(params)
      // console.log('getData', res)
      this.datalist = res.result.page.records
      this.well1 = res.result.well1
      this.well2 = res.result.well2
      this.total = res.result.page.total
      this.st = setTimeout(() => {
        this.checkScroll()
        clearTimeout(this.st); //清除
      }, 0)
      // var s, e, c
      // // var e
      // if (!this.startTime) {
      //   s = this.nows
      // } else {
      //   s = this.formatDateTime(this.startTime)
      // }
      // if (!this.endTime) {
      //   e = this.nowe
      // } else {
      //   e = this.formatDateTime(this.endTime)
      // }
      // if (!this.circle) {
      //   c = 1
      // } else {
      //   c = this.formCircle(this.circle)
      // }
      // console.log(s, e, c)

      // var login = window.sessionStorage.getItem("login")

      // if (login) {
      //   this.getdata(s, e, c)
      // } else {
      //   this.showPwd = true
      // }
      // this.getdata(s, e, c)
    },
    //导出事件处理
    exportHandle () {
      console.log(1)
    },
    // async getdata (s, e, c) {
    //   const result = await this.$axios.get(`/api/system/well/list?beginTime=${s}&endTime=${e}&period=${c}`)
    //   this.datalist = result.data.data
    // this.st = setTimeout(() => {
    //   this.checkScroll()
    //   clearTimeout(this.st); //清除
    // }, 0)
    //   // console.log(111, this.datalist)
    // },
    // 中国标准时间 转换成 年月日
    formatDateTime (date) {
      // if (!data) return
      // console.log(data)
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var seconds = date.getSeconds();
      seconds = seconds < 10 ? ('0' + seconds) : seconds;
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + seconds;
      // return y + '-' + m + '-' + d
    },
    //周期转换
    formCircle (circle) {
      if (circle == 1) return '1'
      if (circle == 30) return '2'
      if (circle == 60) return '3'
    },
    //判断表格是否出现滚动条
    checkScroll () {
      var bodyh = this.$refs.table_body.offsetHeight
      var tableh = this.$refs.table_detail.offsetHeight
      if (tableh > bodyh) {
        this.scroll = true
      } else {
        this.scroll = false
      }
    },
    // 获取当前年月日
    getNowData () {
      var date = new Date();
      // 获取当前月份
      var nowMonth = date.getMonth() + 1;
      // 获取当前是几号
      var strDate = date.getDate();
      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }
      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      return date.getFullYear() + '-' + nowMonth + '-' + strDate;
    },
    //密码验证
    async subpwd () {
      const res = await this.$axios({
        method: 'post',
        url: '/api/system/well/checkCommand',
        data: md5(this.value),
        headers: { "Content-Type": "text/plain" }
      })

      if (!this.value || res.data.code !== 0) {
        return this.$message.error("密码错误")
      }
      this.showPwd = false
      window.sessionStorage.setItem('login', true)
      this.value = ''
      this.checkHandle()
      //   this.$emit("updateShow", false)
      //   this.$emit('updateOpen', 1)

    },
    //滚动加载数据
    scrollHandle (e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      // console.log(scrollTop, clientHeight, scrollHeight)
      if (scrollTop + clientHeight + 50 >= scrollHeight && !this.flag && this.datalist.length < this.total) {
        this.pageNo++
        this.nextPage()
      }

    },
    // 下一页
    async nextPage () {
      this.flag = true
      var login = window.sessionStorage.getItem("login")
      if (!login) return this.showPwd = true
      // this.datalist = []
      let params = {
        infoId: this.num,
        period: this.circle.toString(),
        startTime: new Date(this.startTime).getTime(),
        endTime: new Date(this.endTime).getTime(),
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      const res = await getData(params)
      this.total = res.result.page.total
      // console.log('getData', res)
      var list = res.result.page.records
      console.log(list, this.datalist)
      this.datalist = [...this.datalist, ...list]
      this.flag = false
      this.st = setTimeout(() => {
        this.checkScroll()
        clearTimeout(this.st); //清除
      }, 0)
    },
    // 导出
    exportToExcel () {
      this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let params = {
          infoId: this.num,
          period: this.circle.toString(),
          startTime: new Date(this.startTime).getTime(),
          endTime: new Date(this.endTime).getTime(),
        }
        // 调接口
        exportRunMarket(params).then(res => {
          console.log(res);
          const link = document.createElement('a');// 创建a标签
          let blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' }); // 设置文件类型 
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          link.setAttribute("download", "抽管灌实验数据.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        });
      })
    },


  }

}
</script>

<style scoped lang='less'>
.index_container {
  height: 100%;
  width: 100%;
  display: block;
  // width: 100%;
  // height: 99.1%;
  // min-height: 800px;
  min-width: 800px;
  background-image: url(../assets/imgs/bgimg.png);
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
  .logo {
    position: absolute;
    left: 0.3125rem /* 60/192 */;
    top: 0.03125rem /* 6/192 */;
    height: 0.447917rem /* 86/192 */;
    width: 0.364583rem /* 70/192 */;
    // margin-top: 0.026042rem /* 5/192 */;
  }
  .header_box {
    height: 10%;
    width: 6.697917rem /* 1286/192 */;
    background-image: url(../assets/imgs/headerimg.png);
    background-size: cover;
    background-size: 100% 100%;
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    // text-align: center;
    // background-color: red;
    margin: 0 auto;
    .titlt_box {
      height: 58%;
      line-height: 0.3125rem /* 60/192 */;
      width: 1.979167rem /* 380/192 */;
      margin: 0 auto;
      padding-top: 0.010417rem /* 2/192 */;
      box-sizing: border-box;

      .title {
        font-size: 0.166667rem /* 32/192 */;
        // width: 352px;
        // height: 40px;
        // font-size: 42px;
        font-family: SimHei;
        text-align: center;
        // font-weight: 400;
        color: #5df5f9;
        // line-height: 13px;
      }
    }
    .back {
      position: absolute;
      right: 0.395833rem /* 76/192 */;
      top: 0.104167rem /* 20/192 */;
      width: 0.9375rem /* 180/192 */;
      height: 0.338542rem /* 65/192 */;
      &:hover {
        cursor: pointer;
      }
      .backimg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .chose_box {
    height: 16%;
    width: 96%;
    margin: 0 auto;
    box-sizing: border-box;
    border: 0.005208rem /* 1/192 */ solid #27c9f2;
    position: relative;
    box-shadow: 0 0 0.15625rem /* 30/192 */ 0 inset #27c9f2;
    .datalt {
      position: absolute;
      top: -0.03125rem /* 6/192 */;
      left: -0.03125rem /* 6/192 */;
      height: 70%;
    }
    .datarb {
      position: absolute;
      right: -0.03125rem /* 6/192 */;
      bottom: -0.005208rem /* 1/192 */;
      height: 70%;
    }
    .info {
      width: 96%;
      height: 0.229167rem /* 44/192 */;
      padding: 0.052083rem /* 10/192 */ 0.15625rem /* 30/192 */;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        width: 1.354167rem /* 260/192 */;
        // height: 0.166667rem /* 32/192 */;
        color: #23cefd;
        background-image: url(../assets/imgs/titlebg.png);
        background-size: 100% 100%;
        .tiname {
          display: inline-block;
          font-size: 0.09375rem /* 18/192 */;
          width: 0.520833rem /* 100/192 */;
          height: 0.177083rem /* 34/192 */;
          line-height: 0.177083rem /* 34/192 */;
          min-width: 50px;
          margin-left: 0.15625rem /* 30/192 */;
          margin-top: 0.010417rem /* 2/192 */;
        }
      }
    }
    .chosepro_box {
      width: 75%;
      margin: 0 auto;
      height: 0.208333rem /* 40/192 */;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 0.114583rem /* 22/192 */;
        color: #23cefd;
      }
      /deep/.el-input__inner {
        color: white !important;
        border: 0.005208rem /* 1/192 */ solid #28d7fe;
      }
    }
    .table_box {
      width: 80%;
      margin: 0 auto;
      height: 0.25rem /* 48/192 */;
      // margin-top: 0.104167rem /* 20/192 */;
      // padding: 0 0.333333rem /* 64/192 */;
      font-size: 0.114583rem /* 22/192 */;
      color: #23cefd;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      select {
        margin-left: 0.052083rem /* 10/192 */;
        border: 0.005208rem /* 1/192 */ solid #28d7fe;
        border-radius: 0.026042rem /* 5/192 */;
        /*清除select聚焦时候的边框颜色*/
        color: white;
        font-size: 0.09375rem /* 18/192 */;
        outline: none;
        /*设置select的宽高*/
        width: 0.520833rem /* 100/192 */;
        // text-align: center;
        height: 0.208333rem /* 40/192 */;
        line-height: 0.208333rem /* 40/192 */;
        /*通过padding-left的值让文字处于合适位置*/
        padding-left: 0.052083rem /* 10/192 */;
        background: none;
        option {
          background-color: #ffffff;
          font-size: 0.09375rem /* 18/192 */;
          color: #0d1f47;
        }
      }
      // .timeinput {
      //   margin-left: 0.052083rem /* 10/192 */;
      //   border: 0.005208rem /* 1/192 */ solid #28d7fe;
      //   border-radius: 0.026042rem /* 5/192 */;
      //   font-size: 0.09375rem /* 18/192 */;
      //   /*清除select聚焦时候的边框颜色*/
      //   color: white;
      //   outline: none;
      //   /*设置select的宽高*/
      //   width: 0.416667rem /* 80/192 */;
      //   height: 0.208333rem /* 40/192 */;
      //   line-height: 0.208333rem /* 40/192 */;
      //   /*通过padding-left的值让文字处于合适位置*/
      //   padding-left: 0.052083rem /* 10/192 */;
      //   background: none;
      // }
      .check {
        border: 0.005208rem /* 1/192 */ solid #0c6bcb;
        box-shadow: 0 0 0.026042rem /* 5/192 */ 0 #fff;
        width: 0.479167rem /* 92/192 */;
        height: 0.208333rem /* 40/192 */;
        // background-color: #0c6bcb;
        line-height: 0.208333rem /* 40/192 */;
        text-align: center;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .history_box {
    background-image: url("../assets/imgs/dataimg.png");
    background-size: 100% 100%;
    height: 73%;
    width: 96%;
    margin: 0 auto;
    margin-top: 0.052083rem /* 10/192 */;
    box-sizing: border-box;
    padding: 0.098958rem /* 19/192 */;
    // border: 0.005208rem /* 1/192 */ solid #25c5f0;
    position: relative;
    .datalt {
      position: absolute;
      top: 0;
      left: -0.03125rem /* 6/192 */;
    }
    .datalb {
      position: absolute;
      bottom: 0;
      left: -0.03125rem /* 6/192 */;
    }
    .datart {
      position: absolute;
      top: 0;
      right: -0.020833rem /* 4/192 */;
    }
    .datarb {
      position: absolute;
      bottom: 0;
      right: -0.041667rem /* 8/192 */;
    }
    .title {
      width: 1.354167rem /* 260/192 */;
      // height: 0.166667rem /* 32/192 */;
      color: #23cefd;
      background-image: url(../assets/imgs/titlebg.png);
      background-size: 100% 100%;
      // padding: 0.098958rem /* 19/192 */;
      .tiname {
        display: inline-block;
        font-size: 0.09375rem /* 18/192 */;
        width: 0.520833rem /* 100/192 */;
        height: 0.177083rem /* 34/192 */;
        line-height: 0.177083rem /* 34/192 */;
        min-width: 50px;
        margin-left: 0.15625rem /* 30/192 */;
        margin-top: 0.010417rem /* 2/192 */;
      }
    }
    .table {
      width: 99%;
      margin: 0.052083rem /* 10/192 */ auto;
      font-size: 0.09375rem /* 18/192 */;
      .table-head {
        width: 100%;
        box-sizing: border-box;
      }
      .pdl {
        padding-right: 0.041667rem /* 8/192 */;
      }
      th {
        // background-color: rgba(0, 0, 0, 0.2);
        height: 0.166667rem /* 32/192 */;
        width: 0.9375rem /* 180/192 */;
        line-height: 0.166667rem /* 32/192 */;
        text-align: center;
        border: 0.005208rem /* 1/192 */ solid #28d7fe;
        color: #2de7fc;
        box-sizing: border-box;
      }
      .table_body {
        margin: 0;
        padding: 0;
        height: 56.5vh;
        overflow: auto;
        &::-webkit-scrollbar-thumb {
          background: rgba(40, 147, 182, 0.7);
          border-radius: 0.020833rem /* 4/192 */;
        }
        &::-webkit-scrollbar {
          width: 0.052083rem /* 10/192 */;
          height: 0.03125rem /* 6/192 */;
          background-color: transparent;
          border-radius: 0.015625rem /* 3/192 */;
        }

        //隐藏滚动条
        // &::-webkit-scrollbar {
        //   background-color: transparent;
        // }

        td {
          // background-color: rgba(0, 0, 0, 0.2);
          height: 0.166667rem /* 32/192 */;
          line-height: 0.166667rem /* 32/192 */;
          text-align: center;
          width: 0.9375rem /* 180/192 */;
          border: 0.005208rem /* 1/192 */ solid #28d7fe;
          color: #2de7fc;
          box-sizing: border-box;
        }
      }
    }
  }
  .pwd_container {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    .pwd_box {
      position: absolute;
      top: 25%;
      left: 40%;
      width: 1.833333rem /* 352/192 */;
      height: 2.458333rem /* 472/192 */;
      background-image: url(../assets/imgs/pwdbor.png);
      background-size: 100% 100%;
      box-sizing: border-box;
      padding-top: 0.3125rem /* 60/192 */;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      .avator {
        width: 0.9375rem /* 180/192 */;
        height: 0.9375rem /* 180/192 */;
        display: block;
      }
      .text {
        p {
          margin: 0;
          padding: 0;
          color: #23cefd;
          font-size: 0.125rem /* 24/192 */;
          text-align: center;
          margin-bottom: 0.052083rem /* 10/192 */;
        }
      }
      input {
        width: 1.041667rem /* 200/192 */;
        height: 0.15625rem /* 30/192 */;
        margin-bottom: 0.104167rem /* 20/192 */;
        font-size: 0.104167rem /* 20/192 */;
        background: #70bfe6;
        outline: none;
        border: 0;
        &:focus {
          outline: none;
        }
      }
      .close {
        position: absolute;
        width: 0.21875rem /* 42/192 */;
        height: 0.21875rem /* 42/192 */;
        right: 0.166667rem /* 32/192 */;
        top: 0.203125rem /* 39/192 */;
        background-color: #fff;
        opacity: 0;
      }
    }
  }
}
</style>
